// components/HCDraggable.js
// let dragData = null
export default {
  bind(el, binding, vnode) {
    el.draggable = true

    // 初始化拖拽数据
    el._dragData = binding.value
    // 拖拽开始事件
    el.addEventListener('dragstart', (event) => {
      el._dragData  = binding.value // 每次拖拽开始时获取最新的 binding.value
      el.classList.add('hc-dragging') // 添加拖拽中的样式类
      console.log('拖拽开始:', el._dragData)
    })

    // 拖拽结束事件
    el.addEventListener('dragend', (event) => {
      el.classList.remove('hc-dragging')
      console.log('拖拽结束时的数据:', el._dragData) // 调试信息
      if (el._dragData && event.dataTransfer.dropEffect !== 'none') {
        vnode.context.handleDragStop({ draggedData: el._dragData })
      }
    })

    // 拖拽经过元素时，阻止默认行为，以便触发 drop 事件
    el.addEventListener('dragover', (event) => {
      event.preventDefault()
      // 检查目标元素是否允许接收拖拽
      if (el.dataset.allowDrop === 'false') {
        event.dataTransfer.dropEffect = 'none' // 禁止拖拽放置
      } else {
        event.dataTransfer.dropEffect = 'copy' // 允许拖拽放置
      }
    })

    // 处理 drop 事件
    el.addEventListener('drop', (event) => {
      event.preventDefault()
      console.log('drop 事件中的数据:', el._dragData) // 调试信息
      if (el._dragData && event.dataTransfer.dropEffect !== 'none') {
        vnode.context.handleDragStop({ draggedData: el._dragData })
      }
    })
  },
  /* unbind(el) {
    el.removeEventListener('dragstart')
    el.removeEventListener('dragend')
    el.removeEventListener('dragover')
    el.removeEventListener('drop')
  } */
  update(el, binding) {
    console.log("update", binding.value)
    // 每次 update 时更新 _dragData 的值
    el._dragData = binding.value
  },
}
